<template>
  <div class="login_page">
    <div class="login">
      <el-row>
        <el-col :span="24">
          <div class="welcome">
            欢迎登录
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="left">
            <el-input type="text" v-model="userName" placeholder="请输入用户名" style="border-radius: 5px" class="radius" autocomplete="off" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="left">
            <el-input type="password" v-model="password" placeholder="请输入密码" style="border-radius: 5px" class="radius" autocomplete="off" />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="18" :offset="6">
          <div class="left">
            <el-checkbox label="记住我" size="large" v-model="rem" />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6" :offset="6">
          <div class="left">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
        </el-col>
        <el-col :span="6" >
          <div class="left">
            <el-button type="danger" @click="register">注册</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="error">
        <el-col :span="24" >
          <div class="left">
            <el-alert :title="errorTitle" type="error" effect="dark" @close="close()"/>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import {getData} from '../common/remote'

export default {
  name: "login",
  data(){
    return{
      userName:'',
      password:'',
      rem:false,
      error:false,
      errorTitle:''
    }
  },
  methods:{
    close(){
      this.error=false
    },
    login(){
      const param = {}
      param['userName'] = this.userName
      param['password'] = this.password
      const self = this
      getData('/login',param).then(ret=>{
        console.log(ret)
        if(ret.code==1000){
          sessionStorage.setItem('token',ret.data.token)
          sessionStorage.setItem('userName',self.userName)
          if(self.rem){
            localStorage.setItem('token',ret.data.token)
            localStorage.setItem('userName',self.userName)
          }
          self.$router.push('/')
        }else{
          self.error = true
          self.errorTitle = '账号密码不正确!'
        }
      })
    },
    register(){
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>
.welcome{
  font-family: 幼圆;
  font-size: 30px;
  text-align: center;
}
el-alert{
  margin-top: 5px;
}
.login_page{
  width: 100%; /* 宽度100% */
  height: 100vh; /* 高度100% */
  background-color: #cee5dd;
  background-image: url("~@/assets/login_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.login{
  width: 350px;
  height: 250px;
  position: relative;
  left: calc(50% - 175px);
  top: calc(50vh - 125px);
}
.left{

}
.right{
  background-color: green;
}
.radius{
  height: 40px;
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-bottom: 5px;
}
</style>